<template>
    <div class="w1400">
        <div class=" login-sec">
            <section class="login-logo">
                <div class="login-logo-d">
                    <h1>AI 디지털교과서 통합지원센터</h1>
                </div>
            </section>

            <section class="login-input">
                <div class="login-input-d">
                    <div class="ID">
                        <input type="text" class="id" ref="user_id" placeholder="아이디를 입력하세요." v-model="userLogin.user_id"
                            @keyup.enter="login">
                    </div>
                    <div class="PW">
                        <input type="password" class="password" ref="user_pw" placeholder="비밀번호를 입력하세요."
                            v-model="userLogin.user_pw" @keyup.enter="login">
                    </div>
                </div>
            </section>

             <section class="login-checkbox">
                <div class="login-checkbox-i">
                    <input type="checkbox">
                    <span>
                        로그인상태 유지
                    </span>
                </div>
                <div class="login-checkbox-b">

                    <router-link :to="{ path: '/userIDsearch.page', query: { mode: 'id' } }">
                        <button class="login-bu-after">아이디 찾기</button>
                    </router-link>
                    <router-link :to="{ path: '/userIDsearch.page', query: { mode: 'pw' } }">
                        <button class="login-bu-after">비밀번호찾기</button>
                    </router-link>
            <router-link to="/Join.page">
                <button>회원가입</button>
            </router-link>
        </div>
        </section>

            <div class="flex " style="margin: 1.5rem 0.5rem ;">
                <div class="login-checkbox-i">
                    <input type="checkbox">
                    <span>
                        로그인상태 유지
                    </span>
                </div>
                <router-link to="/Join.page">
                    <button style="background-color: rgba(255, 228, 196, 0);">회원가입</button>
                </router-link>

            </div>
            <section class="login-button">
                <button @click="login">로그인</button>
            </section>
        </div>
    </div>


    <!-- 로그인 모달  회원가입 승인중일때 노출-->

    <div class="modal-wrapper" v-if="isVisible">
        <div class="modal-container">
            <div class="login-modal">
                <p  class="modal-text">
                    가입 승인 중인 회원입니다.<br />
                    회원가입 승인 전까지 특정 서비스는 이용하실 수 없으며,<br />
                    승인 이후 모든 서비스를 이용하실 수 있습니다.
                </p>
                <button class="blue-btn small-btn" @click="hideDiv">확인</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import crypto from "crypto-js";
import { useStore } from 'vuex';
export default {
    data() {
        return {
            isVisible: false,
            userLogin: {
                user_id: null,
                user_pw: null
            },
            store: useStore(),
            isVisible: false,
        };
    },
    methods: {
        hideDiv() {
            this.isVisible = false;
        },
        closeOnEnter(e) {
            if (e.key === 'Enter' && this.isVisible) {
                this.hideDiv();
            }
        },
        //아스크 변환
        asc: function (data) {
            let ascii = '';
            for (let i = 0; i < data.length; i++) {
                ascii += data.charCodeAt(i);
            }
            console.log('ascii', ascii)
            return ascii
        },
        //로그인
        login: function () {
            let vm = this;
            //Encrypt
            // let iv = this.store.state.key.iv;
            // var salt = this.store.state.key.salt;
            // var passPhrase = this.store.state.key.ENC_KEY;
            // console.log('this.asc(iv)   -   ', this.asc(iv));
            // console.log('this.asc(salt)   -   ', this.asc(salt));
            // console.log('this.asc(passPhrase)   -   ', this.asc(passPhrase));
            // var keySize = 128;
            // var iterationCount = 1000;
            // var key128Bits100Iterations = crypto.PBKDF2(passPhrase, crypto.enc.Hex.parse(salt), { keySize: keySize / 32, iterations: iterationCount });

            // var encrypted = CryptoJS.AES.encrypt(
            // this.userLogin.user_id = crypto.AES.encrypt(this.userLogin.user_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            // this.userLogin.user_pw = crypto.AES.encrypt(this.userLogin.user_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();

            // let encryptedUserId = crypto.AES.encrypt(this.userLogin.user_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            // let encryptedUserPw = crypto.AES.encrypt(this.userLogin.user_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();

            // var loginData = {
            //     user_id: encryptedUserId,
            //     user_pw: encryptedUserPw
            // };
            axios({
                url: '/user/login.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8'
                },
                // data: vm.userLogin
                data: vm.userLogin
            }).then(function (response) {
                // console.log("login - response : ", response);
                if (response.data.isLoginSuccess == true) {
                    if (response.data.create_account_approval === 'N') {
                        vm.$refs['user_pw'].blur();
                        vm.isVisible = true;
                    } else {
                        vm.$router.push({ path: '/', query: {} });
                    }

                } else {
                    alert('로그인 정보를 다시 확인해주세요.');
                    vm.$refs['user_id'].focus();
                }
            }).catch(function (error) {
                console.log("login - error : ", error);
            });
        },

        hideDiv: function () {
            this.isVisible = false;
            this.$router.push({ path: '/', query: {} });
        },
    },
    watch: {},
    computed: {},
    mounted() {
        console.log("login mounted");
        window.addEventListener('keyup', this.closeOnEnter);
    },
    beforeDestroy() {
        window.removeEventListener('keyup', this.closeOnEnter);
    },
};

</script>


